<template>
  <div class="spaceEssay">
    <h3>空间文章</h3>
    <n-divider class="spaceEssay-divider" />
    <ShowEssay
    v-if="essay_list[0]"
    v-for="item in essay_list"
    :key="item.essay_id"
    :essay_data="item"
    :isAdmin="true"
    ></ShowEssay>
    <n-empty v-else description="暂无文章" style="height: 265px;justify-content: center;">
    </n-empty>
  </div>
</template>

<script setup lang='ts'>
import {essayListType} from "../../types"
import {getSpaceEssay} from "../../api/essay"
import {ref, onMounted} from "vue"
import ShowEssay from "../../components/showEssay.vue"

const essay_list = ref<essayListType[]>([])

const props = defineProps<{
  spaceId: string
}>()

// 获取空间文章
const getEssay = async(spaceId:string) => {
  const essay_data = await getSpaceEssay(Number(spaceId))
  if(essay_data.code!="200"){
    window.$message.warning(essay_data.message)
  }else{
    essay_list.value = essay_data.data.essayList
  }
}

onMounted(() => {
  getEssay(props.spaceId)
})

</script>

<style lang='scss' scoped>
.spaceEssay{
  width: 100%;
  min-height: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  .spaceEssay-divider{
    margin: 0 0 20px 0;
  }
}
</style>